/* 顶部栏样式 */
.top-bar {
  height: 15vh; /* 占据 15% 高度 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  padding: 10rpx 20rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #e0e0e0;
}

/* 搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
  width: 100%; /* 占满顶部栏宽度 */
  margin-bottom: 10rpx; /* 与收藏文件夹文字的间距 */
}

.search-box input {
  flex: 1;
  height: 60rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 30rpx;
  font-size: 28rpx;
  width: 65%;
}

.search-box button {
  margin-left: 10rpx;
  margin-bottom: 20rpx;
  width: 25%;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 30rpx;
}

/* 收藏文件夹按钮样式 */
.favorite-btn {
  width: 100%; /* 占满顶部栏宽度 */
  height: 60rpx; /* 设置高度 */
  line-height: 60rpx; /* 文字垂直居中 */
  font-size: 32rpx;
  background-color: transparent;
  color: #007aff;
  border: 1rpx solid #007aff;
  border-radius: 30rpx;
  text-align: center; /* 文字水平居中 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 内容区域 */
.content {
  display: flex;
  flex-direction: row;
  height: 85vh; /* 占据剩余 85% 高度 */
}

/* 左侧导航栏 */
.left-column {
  width: 25%;
  background-color: #f0f0f0; /* 左侧导航栏背景色 */
  overflow-y: auto; /* 允许滚动 */
}

/* 右侧展示栏 */
.right-column {
  width: 75%;
  background-color: #ffffff; /* 右侧商品展示背景色 */
  overflow-y: auto; /* 允许滚动 */
}

/* 导航项样式 */
.nav-item {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  cursor: pointer; /* 鼠标悬停时显示手型 */
}

.nav-item.active {
  background-color: #007aff; /* 选中项背景色 */
  color: white; /* 选中项文字颜色 */
}

/* 商品项样式 */
.item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.item image {
  width: 100%;
  height: 200px;
  border-radius: 5px;
}

.spt {
  margin-right: 0rpx;
  margin-left: 0rpx;
}

.spl {
  margin-left: 20rpx;
  margin-right: 10rpx;
  padding-left: 40rpx;
}

.introduce {
  font-size: 24rpx;
  color: rgb(133, 92, 92);
  margin-left: 5rpx;
  margin-right: 20rpx;
  white-space: normal;
}

/* 没有数据时的提示样式 */
.no-data {
  text-align: center;
  font-size: 28rpx;
  color: #999;
  margin-top: 50rpx;
}